<script setup>
import {onMounted, ref, reactive} from 'vue';
import {get, post} from '../js/http.js';
import { DbTypes } from '../js/common.js';

const isEdit = ref(false)
let canalData = ref([])
let currentIndex = ref({})

onMounted(() => {
  getCanal();
})

async function openModel(item, type) {
  isEdit.value = 'is-active'
  currentIndex.value = item
}
async function deleteHandle(item,itemIndex) {
  if(!item.id){
   canalData.value.splice(itemIndex,1);
   return ;
  }
  post("/admin/canal/delete",item).then(res => {
    if (res.success) {
      window.message("删除成功", 'success')
      getCanal();
      canalData.value.splice(itemIndex,1);
    } else {
      window.message(res.message, 'warning')
    }
  }).catch(error => console.log(error))

}

function addHandle() {
  canalData.value.push({name: "NewCanal",rate:1000,batch:1000,username:'',password:''})
  currentIndex.value = canalData.value[canalData.value.length-1]
  isEdit.value = 'is-active'
}


async function getCanal() {

  get("/admin/canal/get").then(res => {
    canalData.value = res.result;
  })
  .catch(error => console.log(error))
}
async function closeModel() {
  isEdit.value = ''

}
async function saveHandle() {
  isEdit.value = ''
  let res = await post("/admin/canal/update", currentIndex.value)
  if (res.success) {
    window.message("保存成功", 'success')
    getCanal();
  } else {
    window.message(res.message, 'warning')
  }
}
</script>
<template>
  <div v-if="canalData">
    <table class="table is-fullwidth">
      <thead>
      <tr>
        <th>名称</th>
        <th>HOST</th>
        <th>Port</th>
        <th>Destination</th>
        <th>Filter</th>
        <th>Rate</th>
        <th>BatchSize</th>
        <th style="text-align: center">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,itemIndex) in  canalData" :key="item.Name">
        <td>{{ item.name }}</td>
        <td>{{ item.host }}</td>
        <td>{{ item.port }}</td>
        <td>{{ item.destination}}</td>
        <td>{{ item.filter }}</td>
        <td>{{ item.rate}}</td>
        <td>{{ item.batch}}</td>
        <td style="text-align: center">
          <a @click="openModel(item,0)">设置</a>
          <a @click="deleteHandle(item,itemIndex)" class="ml-2">删除</a>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <div v-else>获取数据中</div>
  <div :class="['modal', isEdit]">
    <div class="modal-background"></div>
    <div class="modal-card" style="width:960px">
      <header class="modal-card-head">
        <p class="modal-card-title">Canal设置</p>
        <button class="delete" aria-label="close" @click="closeModel"></button>
      </header>
      <section class="modal-card-body">
        <!--索引设置 Begin-->
        <div v-if="currentIndex">
          <div class="field">
            <label class="label">名称</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder=""  v-model="currentIndex.name">
            </div>
            <span class="help is-success">名称只能是英文</span>
          </div>

          <div class="field">
            <label class="label">Host</label>
            <div class="control is-expanded">
              <input class="input is-link" type="text" placeholder=""  v-model="currentIndex.host">
            </div><span class="help is-success">Canal Server的地址</span>
          </div>
          <div class="field">
            <label class="label">Port</label>
            <div class="control is-expanded">
              <input class="input is-link" type="text" placeholder=""  v-model="currentIndex.port">
            </div><span class="help is-success">Canal Server的端口</span>
          </div>
          <div class="field">
            <label class="label">Destination</label>
            <div class="control is-expanded">
              <input class="input is-link" type="text" placeholder=""  v-model="currentIndex.destination">
            </div><span class="help is-success">Canal Server配置的实例名称，不可多个</span>
          </div>
          <div class="field">
            <label class="label">Filter</label>
            <div class="control is-expanded">
              <input class="input is-link" type="text" placeholder=""  v-model="currentIndex.filter">
            </div>
            <span class="help is-success">过滤器</span>
          </div>
          <div class="field">
            <label class="label">Rate</label>
            <div class="control is-expanded">
              <input class="input is-link" type="text" placeholder=""  v-model="currentIndex.rate">
            </div>
            <span class="help is-success">获取数据的频率，毫秒为单位，根据数据量和服务器性能，可自行调整</span>
          </div>
          <div class="field">
            <label class="label">BatchSize</label>
            <div class="control is-expanded">
              <input class="input is-link" type="text" placeholder=""  v-model="currentIndex.batch">
            </div>
            <span class="help is-success">每次获取数据的条数</span>
          </div>
          <div class="field">
            <label class="label">用户名</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder="*" v-model="currentIndex.username">
            </div>
          </div>
          <div class="field">
            <label class="label">密码</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder="*" v-model="currentIndex.password">
            </div>
          </div>
        </div>
        <div class="notification is-link is-light mt-2">  <button class="delete"></button>
          参数的设置和<strong>Canal</strong>相关的知识，请移步<a href="https://github.com/alibaba/canal/wiki" _target="_blank">Canal Wiki</a> .
        </div>
        <!--Canal设置 End-->
      </section>
      <footer class="modal-card-foot is-flex is-justify-content-flex-end">
        <div class="buttons">
          <button class="button is-link" @click="saveHandle">保存</button>
        </div>
      </footer>
    </div>
  </div>

  <div class="container is-flex is-justify-content-center mt-5">
    <button class="button is-link ml-4" @click="addHandle">新增Canal</button>
  </div>

</template>
<style scoped>
</style>
